<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>
<body>
<form action="#">
    用户名<input type="text">
    <span>(字母开头，允许5-16字节，允许字母数字下划线)</span>
    密码<input type="password">
    <span>(字母开头，允许5-16字节，允许字母数字下划线)</span>
</form>
    <script>
       let rule_obj={
           "text":/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,
           "password":/^[a-zA-Z]\w{5,17}$/
    }
      $("input").blur(function(){
          //获取文本框的类型
          let type=$(this).prop("type")
          //判断文本框的规则
          let rule=rule_obj[type]
          //获取文本框里输入的值
          let in_value=$(this).val()
          //检测in_value输入的值得规则是否与rule_obj里的规则对应 对应就是true
         let bool1=rule.test(in_value)
         
         if(bool1){
             $(this).next("span").text("正确")
         } else{
            $(this).next("span").text("错误")
         }
      })
    </script>
</body>
</html>